<template>
	<view class="chat-container">
		<!-- 顶部导航 -->
		<view class="nav-bar">
			<view class="nav-left">
				<uni-icons type="back" size="24" color="#333333" />
			</view>
			<view class="nav-title">宠物医生 王医生</view>
			<view class="nav-right">
				<image class="avatar-small"
					src="https://ai-public.mastergo.com/ai/img_res/a40bc2ca0b8f39a7e8e6a8f5b5eb63f2.jpg" />
			</view>
		</view>
		<!-- 聊天内容区 -->
		<scroll-view class="chat-content" scroll-y>
			<!-- 时间戳 -->
			<view class="timestamp">上午 10:30</view>
			<!-- 对方消息 -->
			<view class="message-item left">
				<image class="avatar"
					src="https://mastergo.com/ai/api/search-image?query=portrait photo of a middle aged asian male doctor wearing white coat and stethoscope, professional medical headshot, isolated on white background, centered composition, subject fills 80 percent of frame&width=80&height=80&orientation=squarish" />
				<view class="message-content">
					<view class="message-bubble">您好，请问有什么可以帮助您的吗？</view>
				</view>
			</view>
			<!-- 自己消息 -->
			<view class="message-item right">
				<view class="message-content">
					<view class="message-bubble">
						我家的猫最近食欲不太好，想咨询一下
					</view>
				</view>
				<image class="avatar"
					src="https://ai-public.mastergo.com/ai/img_res/a1ec2e77a573f7e8777bc937344187e2.jpg" />
			</view>
			<!-- 图片消息 -->
			<view class="message-item right">
				<view class="message-content">
					<view class="message-bubble image-bubble">
						<image class="message-image"
							src="https://ai-public.mastergo.com/ai/img_res/55d03db5d8caa24e1a62d73f4947abf7.jpg"
							mode="widthFix" />
					</view>
				</view>
				<image class="avatar"
					src="https://mastergo.com/ai/api/search-image?query=portrait photo of a young asian person, casual style, friendly smile, natural lighting, isolated on white background, centered composition, subject fills 80 percent of frame&width=80&height=80&orientation=squarish" />
			</view>
			<!-- 位置信息 -->
			<view class="message-item left">
				<image class="avatar"
					src="https://mastergo.com/ai/api/search-image?query=portrait photo of a middle aged asian male doctor wearing white coat and stethoscope, professional medical headshot, isolated on white background, centered composition, subject fills 80 percent of frame&width=80&height=80&orientation=squarish" />
				<view class="message-content">
					<view class="message-bubble location-bubble">
						<view class="location-title">宠物医院地址</view>
						<view class="location-address">北京市朝阳区某某路88号</view>
						<view class="location-distance">距离您 2.5 公里</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 底部输入区 -->
		<view class="input-area">
			<view class="input-tools">
				<uni-icons type="sound" size="28" color="#666666" />
				<uni-icons type="image" size="28" color="#666666" />
				<uni-icons type="location" size="28" color="#666666" />
			</view>
			<view class="input-box">
				<input type="text" placeholder="请输入消息" />
			</view>
			<button class="send-btn">发送</button>
		</view>
	</view>
</template>
<script lang="ts" setup>
	// 这里可以编写需要的逻辑代码
</script>
<style>
	page {
		height: 100%;
	}

	.chat-container {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #F5F5F5;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		height: 88rpx;
		background-color: #FFFFFF;
		padding: 0 30rpx;
		position: relative;
		flex-shrink: 0;
	}

	.nav-left {
		width: 88rpx;
		display: flex;
		align-items: center;
	}

	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 16px;
		font-weight: 500;
		color: #333333;
	}

	.nav-right {
		width: 88rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.avatar-small {
		width: 60rpx;
		height: 60rpx;
		border-radius: 30rpx;
	}

	.chat-content {
		flex: 1;
		padding: 20rpx;
		overflow: auto;
	}

	.timestamp {
		text-align: center;
		font-size: 12px;
		color: #999999;
		margin: 20rpx 0;
	}

	.message-item {
		display: flex;
		margin-bottom: 30rpx;
	}

	.message-item.right {
		flex-direction: row-reverse;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		margin: 0 20rpx;
	}

	.message-content {
		max-width: 60%;
	}

	.message-bubble {
		padding: 20rpx;
		border-radius: 10rpx;
		font-size: 14px;
		word-break: break-all;
	}

	.message-item.left .message-bubble {
		background-color: #FFFFFF;
		color: #333333;
	}

	.message-item.right .message-bubble {
		background-color: #FF4D4F;
		color: #FFFFFF;
	}

	.image-bubble {
		padding: 10rpx;
	}

	.message-image {
		width: 400rpx;
		border-radius: 10rpx;
	}

	.location-bubble {
		width: 400rpx;
	}

	.location-title {
		font-weight: 500;
		margin-bottom: 10rpx;
	}

	.location-address {
		font-size: 12px;
		color: #666666;
		margin-bottom: 10rpx;
	}

	.location-distance {
		font-size: 12px;
		color: #999999;
	}

	.input-area {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background-color: #FFFFFF;
		border-top: 1px solid #EEEEEE;
		flex-shrink: 0;
	}

	.input-tools {
		display: flex;
		align-items: center;
		gap: 30rpx;
	}

	.input-box {
		flex: 1;
		margin: 0 20rpx;
		background-color: #F5F5F5;
		border-radius: 36rpx;
		padding: 16rpx 30rpx;
	}

	.input-box input {
		width: 100%;
		font-size: 14px;
	}

	.send-btn {
		width: 120rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background-color: #FF4D4F;
		color: #FFFFFF;
		font-size: 14px;
		border-radius: 36rpx;
		padding: 0;
		margin: 0;
	}
</style>